<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			订单管理
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			服务订单
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-heart-3-fill" style="color:#999;font-size:18px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="heart-3-fill"></i-icon> -->
				服务订单
			</view>
		</view>
		<view class="p-table">
			<view class="bc" style="margin-bottom: 10px;">
				<input type="text" v-model="search.keyword" placeholder="输入关键字"
					style="width: 300px;margin-right: 15px;" />
				<select v-model="search.appointType" style="width: 150px;margin-right: 15px;">
					<option value="">类型</option>
					<option value="FREE_APPOINT">免费</option>
					<option value="PAY_APPOINT">付费</option>
				</select>
				<select v-model="search.appointState" style="width: 150rpx;margin-right: 15px;">
					<option value="">状态</option>
					<option value="待使用">待使用</option>
					<option value="已使用">已使用</option>
					<option value="已过时">已过时</option>
				</select>
				<view class="p-date-box">
					<picker mode="date" @change="selectDate($event,1)" class="p-date">
						<view>{{search.startDate||'开始日期'}}</view>
					</picker>
					<text>到</text>
					<picker mode="date" @change="selectDate($event,2)" class="p-date">
						<view>{{search.endDate||"结束日期"}}</view>
					</picker>
					<button type="button" class="p-btn" @click="search.startDate='';search.endDate='';">重置</button>
				</view>
				<button class="r10" type="button" @click="searchOrder()">搜索</button>
				<export-excel v-if="tree && tree.length>0" :data="tree" name="表格.xls" :fields="excelFields">
					<button class="b-dell">导出表格</button>
				</export-excel>
			</view>
			<hr />
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th>订单id</th>
					<th>姓名</th>
					<th>手机号</th>
					<th>服务项目</th>
					<th>日期</th>
					<th>地点</th>
					<th>所属物业</th>
					<th>状态</th>
					<th>类型</th>
					<th>费用</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in tree">
					<td style="text-align: center;">{{item.id}}</td>
					<td style="text-align: center;" v-html="keywordHighlight(item.userName)"></td>
					<td style="text-align: center;" v-html="keywordHighlight(item.phone)"></td>
					<td style="text-align: center;" v-html="keywordHighlight(item.serviceName)"></td>
					<td style="text-align: center;">{{item.serviceDate}}</td>
					<td style="text-align: center;" v-html="keywordHighlight(item.serviceSite)"></td>
					<td style="text-align: center;" v-html="keywordHighlight(item.propertyName)"></td>
					<td style="text-align: center;">
						<view v-if="'待使用'==item.state" class="bz">
							<i class="ri-time-fill" style="color:#ffde1e;font-size:12px;"></i>
							<!-- <i-icon style="margin-right: 5rpx;" size="20upx" color="#ffde1e" name="time-fill"></i-icon> -->
							{{item.state}}
						</view>
						<view v-else-if="'已使用'==item.state" class="bz">
							<i class="ri-time-fill" style="color:#00aa00;font-size:12px;"></i>
							<!-- <i-icon style="margin-right: 5rpx;" size="20upx" color="#00aa00" name="time-fill"></i-icon> -->
							{{item.state}}
						</view>
						<view v-else-if="'已过时'==item.state" class="bz">
							<i class="ri-time-fill" style="color:#c2c2c2;font-size:12px;"></i>
							<!-- <i-icon style="margin-right: 5rpx;" size="20upx" color="#c2c2c2" name="time-fill"></i-icon> -->
							{{item.state}}
						</view>
						<view v-else>
							{{item.state}}
						</view>
					</td>
					<td style="text-align: center;">{{item.type}}</td>
					<td style="text-align: center;">{{item.price}}{{item.unit}}</td>
					<td style="text-align: center;">
						<text style="color: #7800BE;" @click="node=item">详情</text>
					</td>
				</tr>
				<tr v-if="tree==null|| tree.length==0">
					<td colspan="12" style="text-align: center;color: #848484; ">暂无数据</td>
				</tr>
			</table>
			<view class="bz t20">
				<Pagination :total="total" :pageSize="size" :nowPage="current" @change="alterCurrent">
				</Pagination>
				<picker mode="selector" :range="[10,20,30,50,100]"
					@change="size=[10,20,30,50,100][$event.detail.value];current=1;searchOrder()" class="p-selector">
					{{size}}条/页
				</picker>
			</view>
		</view>
		<view v-if="node" class="p-appoint-detail">
			<view style="border-bottom:1rpx solid #CCCCCC;height:50rpx;line-height:50rpx;" @click="node=null">
				<text style="font-size: 22px;margin-left: 15px;">订单详情</text>
				<text style="float:right;margin-right:25rpx;cursor:pointer;">关闭</text>
			</view>
			<view style="max-height:90vh;overflow-y:auto;line-height:40rpx;margin-top: 30px;">
				<view><text class="p-td">订单id</text> {{node.id}}</view>
				<view><text class="p-td">服务项目</text>{{node.serviceName}}</view>
				<view><text class="p-td">姓名</text>{{node.userName}}</view>
				<view><text class="p-td">手机号</text>{{node.phone}}</view>
				<view><text class="p-td">日期</text>{{node.serviceDate}}</view>
				<view><text class="p-td">服务地点</text>{{node.serviceSite}}</view>
				<view><text class="p-td">状态</text>{{node.state}}</view>
				<view><text class="p-td">类型</text>{{node.type}}</view>
				<view><text class="p-td">费用</text>{{node.price}}{{node.unit}}</view>
				<view><text class="p-td">创建日期</text>{{node.createDatetime}}</view>
				<view><text class="p-td">所属物业</text>{{node.propertyName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that;
	import Pagination from "@/components/pagination.vue"
	import exportExcel from '@/components/json-2-excel/Json2Excel.vue'
	export default {
		components: {
			Pagination,
			exportExcel
		},
		data() {
			return {
				tree: [],
				node: null,
				pages: 0,
				total: 0,
				current: 1,
				size: 10,
				search: {
					appointType: '',
					appointState: '',
					keyword: '',
					startDate: '',
					endDate: ''
				},
				excelFields: {
					'预约ID': 'id',
					'预约人姓名': 'userName',
					'手机号': 'phone',
					'预约服务': 'serviceName',
					'预约日期': 'serviceDate',
					'预约地点': 'serviceSite',
					'所属物业': 'propertyName',
					'状态': 'state',
					'类型': 'type',
					'费用': 'price',
					'单位': 'unit'
				}
			}
		},
		methods: {
			/**
			 * 获取预约列表
			 */
			getAppointList: function() {
				let params = '?current=' + that.current + '&size=' + that.size;
				if (this.search) {
					for (let key in this.search) {
						if (this.search[key]) {
							params += '&' + key + '=' + this.search[key];
						}
					}
				}
				this.httpRequest({
					url: '/admin/service/appoint/all' + params,
					method: 'GET',
					fn: function(data) {
						// console.log("预约列表：", data)
						that.tree = data.records
						that.pages = parseInt(data.pages)
						that.total = parseInt(data.total)
						that.current = parseInt(data.current)
						that.size = parseInt(data.size)
						for (let i in that.tree) {
							let item = that.tree[i];
							if (item.serviceDate) {
								item.serviceDate = item.serviceDate.substr(0, 10)
							} else {
								item.serviceDate = '[工作日]'
							}
							item.createDatetime = item.createDatetime.substr(0, 16)
						}
					}
				});
			},
			alterCurrent: function(c) {
				if (c) {
					if (c <= this.pages && c >= 1) {
						this.current = c;
						this.getAppointList()
					}
				}
			},
			alterSize() {
				this.getAppointList()
			},
			/**
			 * 搜索预约订单
			 */
			searchOrder() {
				this.getAppointList()
			},
			/**关键字高亮*/
			keywordHighlight(content) {
				if (content && this.search && this.search.keyword) {
					let reg = new RegExp(this.search.keyword, 'g')
					content = content.replace(reg, `<font color=#328bdd >${this.search.keyword}</font>`)
				}
				return content;
			},
			//选择日期
			selectDate(e, i) {
				if (i == 1) {
					this.search.startDate = e.detail.value;
				} else if (i == 2) {
					this.search.endDate = e.detail.value;
				}
			},
			//导出表格
			exportExcle: function() {
				uni.showToast({
					title: '功能建设中...',
					icon: 'none'
				})
			},
			getOrderOfAppoint(item) {
				this.httpRequest({
					url: '/service/appoint/getOrderOfAppoint?appointId=' + item.id,
					method: 'GET',
					fn(data) {
						item['orderInfo'] = data;

					}
				})
			}
		},
		onLoad: function() {
			that = this
			this.getAppointList()
			// this.tree = this.testData
		},
	}
</script>
<style>


</style>
